<template>
  <div class="div">
    <div class="div1">
      <el-container>
        <el-header> </el-header>
        <el-main>
          <!-- 头部加入我们 -->
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple-dark">
                <img class="jrimg" src="../assets/images/加入我们/u456.png" alt="" />
              </div>
            </el-col>
          </el-row>
          <!-- 中间选项卡 -->
          <!-- <el-divider class="hidden-sm-and-up">

              </el-divider> -->
          <el-row>
            <el-col :span="24">
              <div class="xxk">
                <el-tabs class="el-tabs" v-model="activeName" @tab-click="handleClick">
                  <!-- 校招 -->
                  <el-tab-pane class="xxklis" label="校招" name="first">
                    <el-collapse v-model="activeNames" accordion>
                      <el-collapse-item title="一致性 Consistency" name="1">
                        <div>
                          <ul>
                            <li>招聘职位</li>
                            <li>薪资</li>
                            <li>地址</li>
                            <li>招聘人</li>
                          </ul>
                        </div>
                        <div>
                          在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
                        </div>
                      </el-collapse-item>
                      <el-collapse-item title="反馈 Feedback" name="2">
                        <div>
                          控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
                        </div>
                        <div>
                          页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
                        </div>
                      </el-collapse-item>
                      <el-collapse-item title="效率 Efficiency" name="3">
                        <div>简化流程：设计简洁直观的操作流程；</div>
                        <div>
                          清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
                        </div>
                        <div>
                          帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
                        </div>
                      </el-collapse-item>
                      <el-collapse-item title="可控 Controllability" name="4">
                        <div>
                          用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
                        </div>
                        <div>
                          结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
                        </div>
                      </el-collapse-item>
                    </el-collapse>
                  </el-tab-pane>
                  <!-- 社会招聘 -->
                  <el-tab-pane class="xxklis" label="社会招聘" name="second">
                    <el-collapse v-model="activeNames" accordion>
                      <el-collapse-item title="aaa" name="1">
                        <div>
                          <ul class="zpzw">
                            <li>招聘职位</li>
                            <li>薪资</li>
                            <li>地址</li>
                            <li>招聘人</li>
                          </ul>
                        </div>
                        <div class="centerLeft">
                          在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
                        </div>
                      </el-collapse-item>
                      <el-collapse-item title="反馈 Feedback" name="2">
                        <div>
                          控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
                        </div>
                        <div>
                          页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
                        </div>
                      </el-collapse-item>
                      <el-collapse-item title="效率 Efficiency" name="3">
                        <div>简化流程：设计简洁直观的操作流程；</div>
                        <div>
                          清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
                        </div>
                        <div>
                          帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
                        </div>
                      </el-collapse-item>
                      <el-collapse-item title="可控 Controllability" name="4">
                        <div>
                          用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
                        </div>
                        <div>
                          结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
                        </div>
                      </el-collapse-item>
                    </el-collapse>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </div>
    <div class="div2">
      <el-container>
        <el-header> </el-header>
        <el-main>
          <!-- 头部加入我们 -->
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple-dark">
                <img class="jrimg" src="../assets/images/加入我们/u456.png" alt="" />
              </div>
            </el-col>
          </el-row>
          <!-- 中间选项卡 -->
          <!-- <el-divider class="hidden-sm-and-up">

              </el-divider> -->
          <el-row>
            <el-col :span="24">
              <div class="xxk">
                <el-tabs class="el-tabs" v-model="activeName" @tab-click="handleClick">
                  <!-- 校招 -->
                  <el-tab-pane class="xxklis" label="校招" name="first">
                    <el-collapse v-model="activeNames" accordion>
                      <el-collapse-item title="一致性 Consistency" name="1">
                        <div>
                          <ul>
                            <li>招聘职位</li>
                            <li>薪资</li>
                            <li>地址</li>
                            <li>招聘人</li>
                          </ul>
                        </div>
                        <div>
                          在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
                        </div>
                      </el-collapse-item>
                      <el-collapse-item title="反馈 Feedback" name="2">
                        <div>
                          控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
                        </div>
                        <div>
                          页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
                        </div>
                      </el-collapse-item>
                      <el-collapse-item title="效率 Efficiency" name="3">
                        <div>简化流程：设计简洁直观的操作流程；</div>
                        <div>
                          清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
                        </div>
                        <div>
                          帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
                        </div>
                      </el-collapse-item>
                      <el-collapse-item title="可控 Controllability" name="4">
                        <div>
                          用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
                        </div>
                        <div>
                          结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
                        </div>
                      </el-collapse-item>
                    </el-collapse>
                  </el-tab-pane>
                  <!-- 社会招聘 -->
                  <el-tab-pane class="xxklis" label="社会招聘" name="second">
                    <el-collapse v-model="activeNames" accordion>
                      <el-collapse-item title="aaa" name="1">
                        <div>
                          <ul class="zpzw">
                            <li>招聘职位</li>
                            <li>薪资</li>
                            <li>地址</li>
                            <li>招聘人</li>
                          </ul>
                        </div>
                        <div class="centerLeft">
                          在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
                        </div>
                      </el-collapse-item>
                      <el-collapse-item title="反馈 Feedback" name="2">
                        <div>
                          控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
                        </div>
                        <div>
                          页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
                        </div>
                      </el-collapse-item>
                      <el-collapse-item title="效率 Efficiency" name="3">
                        <div>简化流程：设计简洁直观的操作流程；</div>
                        <div>
                          清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
                        </div>
                        <div>
                          帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
                        </div>
                      </el-collapse-item>
                      <el-collapse-item title="可控 Controllability" name="4">
                        <div>
                          用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
                        </div>
                        <div>
                          结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
                        </div>
                      </el-collapse-item>
                    </el-collapse>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </div>


    <bot></bot>
  </div>
</template>
<script>
import bot from "../components/botBox.vue";
// import heads from "@/components/header/head.vue";
export default {
  data() {
    return {
      activeName: "second",
      activeNames: "1",
    };
  },
  components: {
    bot,
    // heads,
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleChange(val) {
      console.log(val);
    },
  },
};
</script>
<style lang="scss" scoped>
@import url("../assets/scss/reset.scss");

// @media (min-width: 667px) and (max-width: 9999px) {
//   .div1 {
//     display: none;
//   }
// }

// @media (min-width: 200px) and (max-width: 667px) {
//   * {
//     padding: 0;
//     margin: 0;
//   }

//   .div2 {
//     display: block;
//   }
// }


ul {
  list-style: none;
}

* {
  margin: 0;
  padding: 0;
}

.div {
  width: 100%;
  height: 100%;

  .zpzw {
    display: flex;
  }

  // padding: 0 2%;
  .el-header,
  .el-footer {
    // background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    // background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    // background-color: #E9EEF3;
    color: #333;
    text-align: center;

    // line-height: 160px;

    // 选项卡
    .xxk {
      margin: 20px auto;
      // width: 1000px;
      height: 500px;
      padding: 0 200px;
    }
  }

  body>.el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

  // 头部图片
  .jrimg {
    width: 100%;
    height: 100%;
  }
}

.centerLeft {
  text-align: left;
}
</style>
<<<<<<< HEAD=======>>>>>>> 3401a2cab9fd5f72b7f6a237de43dd530f027d36